import React,{useState,useContext} from 'react';
import './index.less'
/*
* 1.创建一个context : const xxxContext = React.createContext()
* 2.使用Provider标间包裹的子元素 可以动态更新到context的值 ：<xxxContext.Provider value={data}></xxxContext.Provider>
* 3.
* （1）React.createContext提供的Provider和Consumer
*  使用Consumer在需要使用context的值的位置取出值 ：
*   <xxxContext.Consumer>
      {(value)=>{
        return(

        )
      }}
*   </xxxContext.Consumer>
*
* （2）函数组件：React.createContext提供的Provider和useContext钩子
*  使用const context = useContext(xxxContext) 在组件中使用context的值,然后通过context取值
*
* （3）Class组件：React.createContext提供的Provider和class的contextType属性
*  类组件中通常使用 static contextType = context;  然后通过this.context取值
*
* */

const userInfoContext = React.createContext()
const {Provider} = userInfoContext
function ContextTest(props) {
  let userInfo = {name:'tom',age:18}
  userInfoContext.userInfo = userInfo
  return (
    <div className="con_parent">
       <h4>我是ContextTest组件</h4>
       <p>name:{userInfo.name},age:{userInfo.age}</p>
       <Provider value={userInfo}>
         <A/>
       </Provider>
    </div>
  );
}

function A(props) {
  const context = useContext(userInfoContext)
  return (
    <div className="con_child">
      <h4>我是A组件</h4>
      <p>name:{context.name},age:{context.age}</p>
      <B/>
    </div>
  );
}

const {Consumer} = userInfoContext
function B(props) {
  return (
    <div className="con_graid">
      <h4>我是B组件</h4>
      <Consumer>
        {(value)=>{
          return (
            <p>name:{value.name},age:{value.age}</p>
          )
        }}
      </Consumer>
    </div>
  );
}
export default ContextTest;
